<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {onMounted, ref} from "vue";
import screenApi from "../../router/screen.js";

const option = ref({
  title: {
    text: '供应商未对账、开票、付款金额'
  },
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['未对账总金额','未开发票总额','未付款总金额']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [7020, 17071, 12090],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      },
    }
  ]
});
function getDataList(supplierId) {
  screenApi.queryNotReconciledMap(supplierId).then(res=>{
    option.value.series[0].data = res.data;
    option.value.title.text = res.label;
  });
}
onMounted(async () => {
  //数据对象
  getDataList('');
});
</script>
<template>
  <common-box>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>